// draggable.directive.js
import { onMounted, onUnmounted } from 'vue'

export default {
    mounted(el, binding, vnode) {
        let startX = 0
        let startY = 0
        let currentX = 0
        let currentY = 0

        const handleMouseDown = (e) => {
            if (e.target.classList.contains('header')) {
                e.preventDefault()
                startX = e.clientX - el.offsetLeft
                startY = e.clientY - el.offsetTop
                document.addEventListener('mousemove', handleMouseMove)
                document.addEventListener('mouseup', handleMouseUp)
            }
        }

        const handleMouseMove = (e) => {
            currentX = e.clientX - startX
            currentY = e.clientY - startY
            el.style.left = `${currentX}px`
            el.style.top = `${currentY}px`
        }

        const handleMouseUp = () => {
            document.removeEventListener('mousemove', handleMouseMove)
            document.removeEventListener('mouseup', handleMouseUp)
        }

        el.addEventListener('mousedown', handleMouseDown)
    },
}
